<template>
  <div id="bole">
    <van-notice-bar mode="closeable" v-if="systemInfo">
      {{systemInfo}}
    </van-notice-bar>
    <van-search
    background="#f6f6f6"
    v-model="searchContent"
    placeholder="请输入职位名称关键字"
    show-action
    @search="onSearch"
    @cancel="onCancel"
    v-on:focus="onFocus"
    v-on:blur="onBlur"
  >
    <div slot="action" @click="onSearch" style="padding: 0 8px;color: #38f;">搜索</div>
  </van-search>
  <div id="filtercontent" v-show="showFilter&&showList">
    <van-row justify="space-around">
      <van-col span="8" ><div @click="jobpositionpop=!jobpositionpop">{{filter.jobposition}}<van-icon class="edit-icon" name="edit" /></div></van-col>
      <van-col span="8" ><div @click="jobgradepop=!jobgradepop">{{filter.jobgrade}}<van-icon class="edit-icon" name="edit" /></div></van-col>
      <van-col span="8" ><div @click="jobsalarypop=!jobsalarypop">{{filter.jobsalary}}<van-icon class="edit-icon" name="edit" /></div></van-col>
    </van-row>
  </div>
  <div id="bonuncecontent" v-show="showList">
  <van-row justify="space-around">
    <van-col span="4" class="left"><van-icon name="send-gift" /><span>佣金</span></van-col>
    <van-col span="20" class="right"><span class="van-ellipsis">您推荐人才入职，获得的奖金</span></van-col>
  </van-row>
  </div>
  <div id="jobcontent">
    <!-- <van-row justify="left" style="background:white">
      <van-col span='24'>热门悬赏</van-col>
    </van-row> -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          :finished="finished"
          @load="onLoad"
          :offset=100
          v-show="showList"
        >
          <jobitem v-for="(item,index) in jobList" :jobDetail=item :key="index">
          </jobitem>
          <div style="height:43px;width:100%"/>
        </van-list>
    </van-pull-refresh>
  </div>
  <van-popup v-model="jobpositionpop" position="bottom" :overlay="true" :close-on-click-overlay="true">
    <!-- <van-picker
      show-toolbar
      title="请选择地点"
      :columns="jobcolumns"
      @cancel="onJobpositionCancel"
      @confirm="onJobpositionConfirm"
      @change="onJobpositionChange"
    /> -->
    <van-area :area-list="areaList" value="110101" :columns-num="2"
      @cancel="onJobPositonCancel"
      @confirm="onJobPositonConfirm"
      />
  </van-popup>
  <van-popup v-model="jobgradepop" position="bottom" :overlay="true" :close-on-click-overlay="true">
    <van-picker
      show-toolbar
      title="请选择行业"
      :columns="gradecolumns"
      @cancel="onJobGradeCancel"
      @confirm="onJobGradeConfirm"
      @change="onJobGradeChange"
    />
  </van-popup>
  <van-popup v-model="jobsalarypop" position="bottom" :overlay="true" :close-on-click-overlay="true">
    <van-picker
      show-toolbar
      title="请选择薪资范围"
      :columns="salarycolumns"
      @cancel="onJobSalaryCancel"
      @confirm="onJobSalaryConfirm"
      @change="onJobSalaryChange"
    />
  </van-popup>
  </div>
</template>


<script>
import config from '@/components/project.config.js'
import jobitem from '@/components/jobitem'
import localData from '@/components/cityData.min.js'

// const citys = config.testData.citys
const grades = config.testData.grades
const salary = config.testData.salary

export default {
  components:{
    jobitem: jobitem
  },
  data: function(){
    return {
      dataType:'origin',
      isLoading:true,
      showList:true,
      page: 1,
      totalPage: -1,
      systemInfo: '',
      finished: false,
      jobList: [],
      jobpositionpop:false,
      jobgradepop:false,
      jobsalarypop: false,
      searchContent: '',
      area:'-1',
      salaryMin:'-1',
      salaryMax:'-1',
      city:'-1',
      filter:{
        jobposition: '选择地点',
        jobgrade: '选择行业',
        jobsalary: '薪水范围'
      },
      areaList: localData,
      // jobcolumns: [
      //   {
      //     values: Object.keys(citys),
      //     className: 'column1'
      //   },
      //   {
      //     values: citys['浙江'],
      //     className: 'column2',
      //     defaultIndex: 0
      //   }
      // ],
      gradecolumns: [
        {
          values: Object.keys(grades),
          className: 'column1'
        }
        // ,
        // {
        //   values: grades['地产商业'],
        //   className: 'column2',
        //   defaultIndex: 0
        // }
      ],
      salarycolumns: [
        {
          values: salary,
          className: 'column1'
        },
        {
          values: salary.slice(1),
          className: 'column2',
          defaultIndex: 0
        }
      ]
    }
  },
  computed:{
    showFilter:function(){
      if(this.dataType=='search'){
        return 0
      }else{
        return 1
      }
    }
  },
  watch:{

  },
  methods:{
    ifSearch(){
      if(this.searchContent == ''){
        this.getPositionList()
      }else{
        this.getPositionListBySearch()
      }
    },
    onJobPositonCancel(){
      this.filter.jobposition = '选择地点'
      this.city=-1
      this.jobpositionpop=false
    },
    onJobPositonConfirm(value){
      this.city = value[1].code
      this.filter.jobposition = value[1].name
      this.onFilterSearch()
      // console.log(value)
      // this.jobpositionpop=false
    },
    onLoad: function(){
      if(this.totalPage==-1){
        this.ifSearch()
      }else if(this.page<=this.totalPage){
        this.ifSearch()
      }else{
        this.finished = true
      }

    },
    getPositionListBySearch(){
      this.dataType='search'
      this.$http.get(config.baseUrl+ '/api/positions/search/'+ this.searchContent+'/'+this.page).then(
        function(res){
          if(res.status == 200&& res.data.pageNum == this.page){
            this.jobList = this.jobList.concat(res.data.list)
            this.totalPage = res.data.pages
            this.page++
            this.isLoading=false
          }
        },
        function(){
          alert('获取数据失败')
        }
      )
    },
    onSearch:function(){
      this.page = 1
      this.totalPage = -1
      this.finished = false
      this.jobList = []
      this.ifSearch()
    },
    onCancel:function(){
      this.searchContent = ''
    },
    // onJobpositionChange:function(picker,values){
    //   picker.setColumnValues(1, citys[values[0]]);

    // },
    // onJobpositionConfirm(value, index) {
    //   alert(`当前值：${value}, 当前索引：${index} `);
    //   console.log(index)
    // },
    // onJobpositionCancel() {
    //   this.jobpositionpop = false
    // },
    onJobGradeChange:function(picker,values){
      // picker.setColumnValues(1, grades[values[0]]);

    },
    onJobGradeConfirm(value, index) {
      // alert(`当前值：${value}, 当前索引：${index} `);
      this.filter.jobgrade = value[0]
      this.area = index[0]+1
      this.onFilterSearch()
      // console.log(index,value)
    },
    onJobGradeCancel() {
      this.filter.jobgrade = '选择行业'
      this.area = -1
      this.jobgradepop = false
    },
    onJobSalaryChange:function(picker,values,index){
      // picker.setColumnValues(1, salary.slice(index+1));
      if(index== 0){
        var itemindex = picker.getColumnIndex(0)
        // console.log(itemindex,salary.slice(itemindex))
        picker.setColumnValues(1,salary.slice(itemindex+1))
      }

    },
    onFilterSearch(){
      this.jobsalarypop = false
      this.jobgradepop = false
      this.jobpositionpop=false
      this.totalPage = -1
      this.page = 1
      this.finished = false
      this.jobList = []
      this.ifSearch()
    },
    onJobSalaryConfirm(value, index) {
      // alert(`当前值：${value}, 当前索引：${index} `);
      this.salaryMin = value[0].slice(0,value[0].length-1)
      this.salaryMax = value[1].slice(0,value[1].length-1)
      this.filter.jobsalary = value[0].slice(0,value[0].length-1)+'万-'+value[1].slice(0,value[1].length-1)+'万'
      this.onFilterSearch()
      // console.log(index)
    },
    onJobSalaryCancel() {
      this.filter.jobsalary = '薪水范围'
      this.salaryMin =-1
      this.salaryMax =-1
      this.jobsalarypop = false
    },
    getPositionList(){
      if(this.dataType == 'search'){
        this.dataType = 'origin'
        this.finished = false
      }
      this.$http.get(config.baseUrl+ '/api/positions/filter/'+ this.page+'?area='+this.area+'&salaryMin='+this.salaryMin+'&city='+this.city+'&salaryMax='+this.salaryMax).then(
        function(res){
          if(res.status == 200&& res.data.pageNum == this.page){
            this.jobList = this.jobList.concat(res.data.list)
            this.totalPage = res.data.pages
            this.page++
            this.isLoading=false
          }
        },
        function(){
          alert('获取数据失败')
        }
      )
    },
    onFocus(){
      this.showList=false
    },
    onBlur(){
      this.showList=true
    },
    onRefresh(){
      this.jobList = new Array
      this.page=1
      this.totalPage=-1
      this.finished=false
      this.getPositionList()
      this.$toast('刷新成功')

    }

  },
  mounted(){
    this.$store.commit('showTab')
    this.ifSearch()
    // console.log(this.$router)
  }
}
</script>


<style lang="stylus" scoped>
#bonuncecontent{
  margin  3px 8px
  padding-left 8px
  padding-top 5px
  font-size 14px
}
#bonuncecontent .van-row{
  margin-bottom 5px
}
#bonuncecontent .left{
  color: #38f
  // font-size 16px
  // line-height 18px
}
#bonuncecontent .left i{
  // line-height 18px
  top: 2px
}
#bonuncecontent .left span{
  // font-size 14px
  // padding-bottom  2px
  // line-height 18px
  margin-left 5px
}
#bonuncecontent .right{
  // color: #38f
  // font-size 16px
  // line-height 18px
}
#bonuncecontent .right span{
  color: #999
  // line-height 18px
  font-size 12px
}
#filtercontent{
  margin  3px 8px
  padding-left 8px
  // padding-top 5px
  font-size 14px
  text-align  center
}
#filtercontent .edit-icon{
  margin-left 4px
  top 1px
}
#jobcontent{
  color #333
  font-size 14px
  // background-color white

  margin-bottom 5px
}
</style>

